<template>
  <div class="service-case main-item">
        <h2>服务案例</h2>
        <ul id="certify">
          <li>
            <div class="service-text">
              <h3>企业版</h3>
              <div class="span-text">
                <span>企业社区，职工读书交流</span>
                <span>闯关打卡，激发读书动力</span>
                <span>阅读计划，读书习惯养成</span>
                <span>领导荐书、线上读书会</span>
              </div>
              <p>国营企业、私营企业、外资企业、中小微企业</p>
            </div>
            <div class="animation-content">
              <div class="hover-opt">
                <img src="/img/main/kuai shou.png">
                <p>
                  企业专属数字图书馆，通过“协同阅读”提升员工能力，打造学习型组织
                </p>
                <a href="#" class="hover-btn">
                  <span>查看更多</span>
                  <span></span>
                </a>
              </div>
            </div>
          </li>
          <li>
            <div class="service-text">
              <h3>市政版</h3>
              <div class="span-text">
                <span>国家三级数据加密，安全本地部署</span>
                <span>正版内容资源，多端接入方式</span>
                <span>【新时代.新经典】系列党建书籍</span>
                <span> 手机、电脑、pad、一体机多端阅读</span>
              </div>
              <p>政府机构、事业单位、医院、银行、公共图书馆</p>
            </div>
            <div class="animation-content">
              <div class="hover-opt">
                <img src="/img/main/kuai shou.png">
                <p>
                  企业专属数字图书馆，通过“协同阅读”提升员工能力，打造学习型组织
                </p>
                <a href="#" class="hover-btn">
                  <span>查看更多</span>
                  <span></span>
                </a>
              </div>
            </div>
          </li>
          <li>
            <div class="service-text">
              <h3>高校版</h3>
              <div class="span-text">
                <span>大奖书、畅销书系高覆盖</span>
                <span>便捷实用的阅读学习工具</span>
                <span>手机/电脑/pad多端可阅读</span>
                <span> 阅读学习活动，增加读书乐趣</span>
              </div>
              <p>高等院校、中小学校、私立院校</p>
            </div>
            <div class="animation-content">
              <div class="hover-opt">
                <img src="/img/main/kuai shou.png">
                <p>
                  企业专属数字图书馆，通过“协同阅读”提升员工能力，打造学习型组织
                </p>
                <a href="#" class="hover-btn">
                  <span>查看更多</span>
                  <span></span>
                </a>
              </div>
            </div>
          </li>
        </ul>
      </div>
</template>
<style scoped>
.main-item:nth-child(odd){
  background-color: #f7f8fa;
}
  .service-case{
  background: #2979FF;
  overflow: hidden;
}
.service-case h2{
  margin-bottom: 36px;
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  color: #262626;
}
.service-case>ul{
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.service-case > ul >li:nth-child(1){
  background: url(/img/main/download5.png)no-repeat left top /100% 100%;
}
.service-case > ul >li:nth-child(2){
  background: url(/img/main/download6.png)no-repeat left top /100% 100%;
}
.service-case > ul >li:nth-child(3){
  background: url(/img/main/download7.png)no-repeat left top /100% 100%;
}
.main-item:nth-child(odd){
  background-color: #f7f8fa;
}

.service-case ul li{
  width: 320px;
  height: 556px;
  border-radius: 16px;
  box-sizing: border-box;
  color: #fff;
  font-size: 16px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.service-case .service-text{
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 10;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  box-sizing: border-box;
  padding: 24px 0;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.service-case ul>li:hover .service-text{
  display: none;
}
.service-case .service-text h3{
  font-size: 24px;
  line-height: 32px;
  font-size: 500;
  margin-bottom: 12px;
}
.service-case .service-text .span-text{
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: start;
  align-items: flex-start;
}
.service-case .service-text .span-text span{
  display: block;
  line-height: 22px;
  padding-left: 14px;
  position: relative;
  margin-bottom: 8px;
}
.service-case .service-text .span-text span::before{
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  left: 0;top: 50%;
}
.service-case .service-text p{
  font-size: 12px;
  opacity: .5;
  margin-top: 16px;
}
.service-case .animation-content{
  width: 320px;
  height: 556px;
  top: 310px;
  position: absolute;
  transition: top .5s ease;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.service-case ul>li:hover .animation-content{
    top: 0;
}

.service-case  ul >li:nth-child(1) .animation-content {
  background: #626caa;
}
.service-case  ul >li:nth-child(2) .animation-content {
  background: #726fa4;
}
.service-case  ul >li:nth-child(3) .animation-content {
  background: #65978b;
}
.service-case .animation-content .hover-opt{
  transition: top .5s ease;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  padding: 0 40px;
  opacity: 0;
}
.service-case ul>li div:hover .hover-opt{
    top: -500px;
    opacity: 1;
    bottom: 500px;
}

.service-case .animation-content .hover-opt img{
  width: 72px;height: 72px;
  border: 0 none;
}
.service-case .animation-content .hover-opt p{
  width: 100%;
  margin-bottom: 36px;
  margin-top: 24px;
}
.service-case .animation-content .hover-opt a{
  text-decoration: none;
  color: #555;
}
.hover-btn{
  margin-top: 24px;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  font-size: 12px;
  cursor: pointer;
  min-width: 68px;
}
.hover-btn span{
  color: #fff;
  display: inline-block;
}
.service-case .animation-content .hover-opt span:nth-child(2){
  margin-left: 4px;
  width: 15px;
  height: 5px;
  background: url(/img/main/箭头.png)no-repeat left 50%/100% 100%;
}

</style>